<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>wxs blog</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" />
    <link rel="stylesheet" th:href="@{/editor/css/editormd.css}" />
    <link rel="shortcut icon" th:href="@{https://pandao.github.io/editor.md/favicon.ico}" type="image/x-icon" />
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md12">
            <!--<form name="mdEditorForm">
                &lt;!&ndash;<div>
                    标题 : <input type="text" name="title">
                </div>
                <div>
                    作者： <input type="text" name="author">
                </div>&ndash;&gt;
                &lt;!&ndash;<div id="article-content">
                    <textarea name="content" id="content" style="display:none;"></textarea>
                </div>&ndash;&gt;
            </form>-->

            <form class="layui-form layui-form-pane" name="mdEditorForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">作者</label>
                    <div class="layui-input-inline">
                        <input type="text" name="author" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">作者名字</div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">博客内容</label>
                    <div class="layui-input-block" id="article-content">
                        <textarea name="content" class="layui-textarea" style="display:none;"></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script th:src="@{/editor/editormd.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
    var testEditor;
    $(function() {
        testEditor = editormd("article-content", {
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            path    : "../editor/lib/",
            saveHTMLToTextarea: true,/*保存html到Textarea*/
            emoji: true,
            /*theme: "dark",//工具栏主题
            previewTheme: "dark",//预览主题
            editorTheme: "pastel-on-dark",//编辑主题*/
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭

            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/article/file/upload",
            onload : function() {
                console.log('onload', this);
            },

            /*指定需要显示的功能按钮*/
            toolbarIcons : function() {
                return ["undo","redo","|",
                    "bold","del","italic","quote","ucwords","uppercase","lowercase","|",
                    "h1","h2","h3","h4","h5","h6","|",
                    "list-ul","list-ol","hr","|",
                    "link","reference-link","image","code","preformatted-text",
                    "code-block","table","datetime","emoji","html-entities","pagebreak","|",
                    "goto-line","watch","preview","fullscreen","clear","search","|",
                    "help","info","releaseIcon", "index"]
            },

            /*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
            toolbarIconTexts : {
                releaseIcon : "<span bgcolor=\"gray\">发布</span>",
                index : "<span bgcolor=\"red\">返回首页</span>",
            },
            /*给自定义按钮指定回调函数*/
            toolbarHandlers:{
                releaseIcon : function(cm, icon, cursor, selection) {
                    //表单提交
                    mdEditorForm.method = "post";
                    mdEditorForm.action = "/article/addArticle";//提交至服务器的路径
                    mdEditorForm.submit();
                },
                index : function(){
                    window.location.href = '/';
                },
            }

        });

        layui.use(['element','form'],function (){
            var element = layui.element;
            var form = layui.form;
        });

    });
</script>
</body>
</html>
